// import React, { useEffect } from "react";
import "./Todolist.css";
import Todofooter from "../../components/Todofooter/Todofooter";
import Todoheader from "../../components/TodoHeader/TodoHeader";
import Todomain from "../../components/Todomain/Todomain.jsx";
// import { nanoid } from "nanoid";
import { useState } from "react";
import { useEffect } from "react";
// import axios from "../../http/http.js";
import {
  getalltodo,
  createtodo,
  remove,
  requpdata,
  reqclear,
  reqcheck,
} from "../../api/todo";
export default function Todolist() {
  let [todo, settodo] = useState([]);
  // 模拟生命周期  请求数据
  useEffect(() => {
    async function main() {
      let data = await getalltodo();
      settodo(data);
    }
    main();
  }, []);

  // 新增数据
  let addtodo = async (title) => {
    let data = await createtodo({ done: false, title });
    settodo([...todo, data]);

    // let data = {
    //   id: nanoid(),
    //   title: title,
    //   done: false,
    // };
    // if (title.length !== 0) {
    //   settodo([...todo, data]);
    // }
  };
  // 删除数据
  let deltodo = async (id) => {
    await remove(id);

    let newtodo = todo.filter((item) => {
      return item.id !== id;
    });
    settodo(newtodo);
  };

  // 修改todo  中的 done
  let updatatodo = async (id, done) => {
    await requpdata(id, done);

    let newtodo = todo.map((item) => {
      if (item.id === id) {
        item.done = !item.done;
      }
      return item;
    });
    settodo(newtodo);
  };
  // 清除所有已完成的任务
  let claerfinish = async () => {
    await reqclear(todo);

    let newtodo = todo.filter((item) => item.done === false);

    settodo(newtodo);
  };

  // 全选
  let checkall = async (done) => {
    await reqcheck(todo, done);

    let newtodo = todo.map((item) => {
      item.done = done;
      return item;
    });
    settodo(newtodo);
  };

  // 测试;
  //   useEffect(() => {
  //     checkall(true);
  //   }, []);

  return (
    <>
      <div className="todo-container">
        <div className="todo-wrap">
          <Todoheader addtodo={addtodo}></Todoheader>
          <Todomain
            todo={todo}
            deltodo={deltodo}
            updatatodo={updatatodo}
          ></Todomain>
          <Todofooter
            todo={todo}
            claerfinish={claerfinish}
            checkall={checkall}
          ></Todofooter>
        </div>
      </div>
    </>
  );
}
